import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon'

export default {
  name: 'SMenu',
  props: {
    isheade: {
      type: Boolean,
      required: false
    },
    menu: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      openKeys: [],
      selectedKeys: [],
      cachedOpenKeys: []
    }
  },
  computed: {
    rootSubmenuKeys: vm => {
      const keys = []
      vm.menu.forEach(item => keys.push(item.path))
      return keys
    }
  },
  mounted() {
    this.updateMenu()
  },
  watch: {
    collapsed(val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat()
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    },
    $route: function () {
      this.updateMenu()
    }
  },
  methods: {
    // select menu item
    onOpenChange(openKeys) {
      // 在水平模式下时执行，并且不再执行后续
      if (this.mode === 'horizontal') {
        this.openKeys = openKeys
        return
      }
      // 非水平模式时
      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    onSelect({ item, key, selectedKeys }) {
      this.selectedKeys = selectedKeys
      this.$emit('select', { item, key, selectedKeys })
    },
    onClick({ item, key, selectedKeys }) {
      this.selectedKeys = selectedKeys
      this.$emit('select', { item, key, selectedKeys })
    },
    updateMenu() {
      // const routes = this.$route.matched.concat()
      // const { hidden } = this.$route.meta
      // if (routes.length >= 3 && hidden) {
      //   routes.pop()
      //   this.selectedKeys = [routes[routes.length - 1].path]
      // } else {
      //   if (this.mode == 'horizontal') {
      //     this.selectedKeys = [routes[1].path]
      //   } else if (this.mode == 'inline') {
      //     this.selectedKeys = [routes.pop().path]
      //   }
      // }
      // const openKeys = []
      // if (this.mode === 'inline') {
      //   routes.forEach(item => {
      //     openKeys.push(item.path)
      //   })
      // }
      // this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)


      // 2022-09-30 取消注释
      // const matchedRoutes = this.$route.matched.filter(item => item.path !== '')
      // this.selectedKeys = this.getSelectedKey(this.$route)
      // let openKeys = matchedRoutes.map(item => item.path)
      // openKeys = openKeys.slice(0, openKeys.length - 1)
      // if (openKeys != this.openKeys) {
      //   this.collapsed || this.mode === 'horizontal' ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
      // }

      // 2022-09-30 处理同名菜单跳转不能被识别的bug
      const matchedRoutes = this.$route.matched.filter(item => item.path !== '')
      this.selectedKeys = this.getSelectedKey(this.$route)
      const menu = this.menu
      let openKeys = menu.map(item => item.path)
      openKeys = openKeys.slice(0, openKeys.length)
      this.openKeys = openKeys
      if (openKeys !== this.openKeys) {
        this.collapsed || this.mode === 'horizontal' ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
      }

      this.$emit('select', { key: matchedRoutes[0].path })
    },
    getSelectedKey(route) {
      // return route.matched.map(item => item.path)
      const ary = route.matched.map(item => item.path)
      console.log('selected', ary[ary.length - 1]);
      return [ary[ary.length - 1]]
    },
    // onSelect({ item, key, selectedKeys }) {
    //   this.selectedKeys = selectedKeys
    //   this.$emit('select', { item, key, selectedKeys })
    // },
    // render
    renderItem(menu) {
      if (!menu.hidden) {
        return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
      }
      return null
    },
    renderMenuItem(menu) {
      const target = menu.meta.target || null
      const CustomTag = (target && 'a') || 'router-link'
      const props = { to: { name: menu.name } }
      const attrs = { href: menu.path, target: menu.meta.target }

      if (menu.children && menu.hideChildrenInMenu) {
        // 把有子菜单的 并且 父菜单是要隐藏子菜单的
        // 都给子菜单增加一个 hidden 属性
        // 用来给刷新页面时， selectedKeys 做控制用
        menu.children.forEach(item => {
          item.meta = Object.assign(item.meta, { hidden: true })
        })
      }

      if (false) {
        return (
          <Menu.Item {...{ key: menu.path }} style="height:64px;padding: 0 2rem">
            <CustomTag {...{ props, attrs }}>
              {this.renderIcon(menu.meta.icon)}
              <p style="margin-top: -23px;font-size:14px">{menu.meta.title}</p>
            </CustomTag>
          </Menu.Item>
        )
      } else {
        return (
          <Menu.Item {...{ key: menu.path }}>
            <CustomTag {...{ props, attrs }}>
              {this.renderIcon(menu.meta.icon)}
              <span style="font-size:14px">{menu.meta.title}</span>
            </CustomTag>
          </Menu.Item>
        )
      }
    },
    renderSubMenu(menu) {
      const itemArr = []
      if (!menu.hideChildrenInMenu) {
        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
      }
      if (false) {
        return (
          <Menu.SubMenu {...{ key: menu.path }} style="height:64px;padding: 0 2rem">
            <span slot="title" style="height:64px">
              {this.renderIcon(menu.meta.icon)}
              <p style="margin-top: -23px;font-size:14px">{menu.meta.title}</p>
            </span>
            {itemArr}
          </Menu.SubMenu>
        )
      } else {
        return (
          <Menu.SubMenu {...{ key: menu.path }}>
            <span slot="title">
              {this.renderIcon(menu.meta.icon)}
              <span style="font-weight:bold;font-size:14px">{menu.meta.title}</span>
            </span>
            {itemArr}
          </Menu.SubMenu>
        )
      }
    },
    renderIcon(icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }
      const props = {}
      typeof icon === 'object' ? (props.component = icon) : (props.type = icon)
      if (false) {
        return <Icon style="display:block;font-size:24px;margin-right:0;margin-top: 12px" {...{ props }} />
      } else {
        return <Icon {...{ props }} />
      }
    }
  },

  render() {
    const dynamicProps = {
      props: {
        mode: this.mode,
        theme: this.theme,
        openKeys: this.openKeys,
        selectedKeys: this.selectedKeys
      },
      on: {
        openChange: this.onOpenChange,
        select: this.onSelect,
        // click: this.onClick
      }
    }

    const menuTree = this.menu.map(item => {
      if (item.hidden) {
        return null
      }
      return this.renderItem(item)
    })

    return (
      <Menu style={this.isheade ? 'background: #3B5998' : 'background: #4A5259;height:100%'} {...dynamicProps}>
        {menuTree}
      </Menu>
    )
  }
}
